<template>
    <div>
        <div v-if="type">
            <el-button type="danger" style="float:right;" @click="user_switch(0)">未激活用户</el-button>
            <el-button type="success" style="float:right;" @click="user_switch(1)">已激活用户</el-button>
            <div v-if="is_active == 0">
                <el-table :data="unable_user_list" border style="width: 100%" height="500px">
                    <el-table-column fixed prop="username" label="用户名" width="200"> </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="200"> </el-table-column>
                    <el-table-column prop="permission" label="权限" width="150" :formatter="per_filter"> </el-table-column>
                    <el-table-column prop="company" label="所属公司" width="200" :formatter="com_filter"> </el-table-column>
                    <el-table-column prop="is_delete" label="能否登录" width="140" :formatter="is_delete"> </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="update_type(scope.$index, scope.row)" type="text" size="small">权限修改</el-button>
                            <el-button @click="user_delete(scope.$index, scope.row)" type="text" size="small">存档</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="is_active == 1">
                <el-table :data="isable_user_list" border style="width: 100%" height="500px">
                    <el-table-column fixed prop="username" label="用户名" width="200"> </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="200"> </el-table-column>
                    <el-table-column prop="permission" label="权限" width="150" :formatter="per_filter"> </el-table-column>
                    <el-table-column prop="company" label="所属公司" width="200" :formatter="com_filter"> </el-table-column>
                    <el-table-column prop="is_delete" label="能否登录" width="140"> 不可登录</el-table-column>

                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="active(scope.$index, scope.row)" type="text" size="small">激活</el-button>
                            <el-button @click="update_type(scope.$index, scope.row)" type="text" size="small">分配权限</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog title="权限分配/修改" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="权限列表" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择用户权限">
                            <el-option v-for="(item, index) in permission_list" :label="item.typ" :value="item.id" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update_type1()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div v-if="!type">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>{{ self_user.username }}的基本信息</span>
                </div>
                <div class="text item">手机号：{{ self_user.phone }}</div>
                <div class="text item">邮箱{{ self_user.email }}</div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { userinfo, permission, update_type, get_user, del_user } from '../../api/api.js';

export default {
    methods: {
        handleClick(row) {}
    },

    data() {
        return {
            isable_user_list: [],
            unable_user_list: [],
            is_active: 0,
            dialogFormVisible: false,
            form: {
                region: ''
            },
            formLabelWidth: '100px',
            updatename: '',
            type_id: localStorage.getItem('type_id'),
            type: '',
            permission_list: [],
            company_list: [],
            self_user: {}
        };
    },
    mounted: function() {
        this.get_per();
        if (this.type_id == 1) {
            this.unable_user();
            this.isable_user();
            this.type = '是';
        } else {
            this.type = '';
            this.self_info();
        }
    },
    methods: {
        // 获取所有未通过审核的用户
        unable_user() {
            userinfo().then(res => {
                this.unable_user_list = res.data.data;
            });
        },
        // 获取当前用户信息
        self_info() {
            userinfo({ params: { uid: localStorage.getItem('uid') } }).then(res => {
                this.self_user = res.data.data;
            });
        },
        // 获取所有通过审核的用户
        isable_user() {
            get_user().then(res => {
                this.isable_user_list = res.data.data;
            });
        },
        active(index, row) {
            console.log(row.username);
            var params = {
                username: row.username
            };
            active_user(params).then(res => {
                this.$message(res.message);
                this.unable_user();
            });
        },
        user_delete(index, row) {
            var params = {
                username: row.username
            };
            del_user(params).then(res => {
                this.$message(res.data.message);
                this.unable_user();
            });
        },
        update_type(index, row) {
            this.username = row.username;
            this.dialogFormVisible = true;
        },
        // 修改用户权限
        update_type1() {
            var params = {
                username: this.username,
                permission: this.form.region
            };
            update_type(params).then(res => {
                //关闭弹窗
                this.dialogFormVisible = false;
                this.$router.go(0);
                this.$message(res.data.msg);
            });
        },
        // 获取所有权限和公司
        get_per() {
            permission().then(res => {
                this.permission_list = res.data.data;
                this.company_list = res.data.company;
            });
        },
        // 权限过滤器
        per_filter(row) {
            for (let i of this.permission_list) {
                if (row.permission == i.id) {
                    return row.permission == i.id ? i.typ : '未知权限';
                }
            }
        },
        // 公司过滤器
        com_filter(row) {
            for (let i of this.company_list) {
                if (row.company == i.id) {
                    return row.company == i.id ? i.name : '未知公司';
                }
            }
        },
        // 能否登录过滤器
        is_delete(row) {
            return row.is_delete == 0 ? '可登录' : row.is_delete == 1 ? '已归档' : '未知';
        },
        // 切换激活/未激活用户
        user_switch(is_able) {
            if (is_able == 1) {
                this.is_active = 0;
            } else {
                this.is_active = 1;
            }
        }
    }
};
</script>
<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 480px;
}
</style>